<template>
    <d2-container>
        <el-main>
            <el-form :model="chargeOrder" ref="chargeOrder" :rules="formRules">

                <el-form-item label="所在校区" prop="school">
                    <el-select
                            v-model="chargeOrder.school"
                            filterable
                            :disabled="disabled"
                            @change="reflash"
                            @load="reflash"
                            >
                        <el-option
                                v-for="item in option.schoolList"
                                :key="item._id"
                                :label="item.name"
                                :value="item._id"
                        ></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="充值学生" prop="student">
                    <el-button
                            @click="selectStudent = true"
                            style="float:left;margin:10px"
                            icon="el-icon-plus"
                            size="small"
                            type="primary"
                            :disabled="disabled">
                        选择充值的学生
                    </el-button>
                    <el-dialog title="学生列表" :visible.sync="selectStudent">
                        <el-input placeholder="请输入学生姓名" v-model="searchStudentName" size="small">
                            <el-button slot="append" icon="el-icon-search" @click="searchStudent"></el-button>
                        </el-input>
                        <el-table :data="studentList">
                            <el-table-column property="name" label="学生姓名"></el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="addStudent(scope.row)" type="text">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="selectStudent = false">关闭</el-button>
                        </div>

                    </el-dialog>
                    <el-table :data="selectedStudentList" border style="width: 100%">
                        <el-table-column prop="name" label="学生姓名"></el-table-column>
                        <el-table-column fixed="right" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="deleteStudentClick(scope.$index)" type="text" size="small"
                                           :disabled="disabled">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>

                <el-form-item label="经办员工" prop="agent">
                    <el-button
                            @click="selectStaff = true"
                            style="float:left;margin:10px"
                            icon="el-icon-plus"
                            size="small"
                            type="primary"
                            :disabled="disabled"

                    >选择经办的员工
                    </el-button>
                    <el-dialog title="员工" :visible.sync="selectStaff">
                        <el-input placeholder="请输入员工姓名" v-model="searchStaffName" size="small">
                            <el-button slot="append" icon="el-icon-search" @click="searchStaff"></el-button>
                        </el-input>
                        <el-table :data="staffList">
                            <el-table-column property="name" label="员工姓名"></el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="addStaff(scope.row)" type="text">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="selectStaff = false">关闭</el-button>
                        </div>
                    </el-dialog>

                    <el-table :data="selectedStaffList" border style="width: 100%">
                        <el-table-column prop="name" label="经办人姓名"></el-table-column>
                        <el-table-column fixed="right" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="deleteStaffClick(scope.$index)" type="text" size="small"
                                           :disabled="disabled">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>

                <el-form-item label="总价" prop="total">
                    <el-input placeholder type='number' v-model="chargeOrder.total" min="0"></el-input>
                </el-form-item>

                <el-form-item label="优惠" prop="discount">
                    <el-input placeholder type='number' v-model="chargeOrder.discount" min="0"></el-input>
                </el-form-item>

                <el-form-item label="支付渠道" prop="payWay">
                    <el-radio-group v-model="chargeOrder.payWay">
                        <el-radio-button label="1">现金</el-radio-button>
                        <el-radio-button label="2">支付宝</el-radio-button>
                        <el-radio-button label="3">微信</el-radio-button>
                        <el-radio-button label="4">其它</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="支付状态" prop="payStatus">
                    <el-radio-group v-model="chargeOrder.payStatus">
                        <el-radio-button label="0">待支付</el-radio-button>
                        <el-radio-button label="1">已支付</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item v-if="this.chargeOrder.agent" label="是否提成" prop="hasBonus">
                    <el-radio-group v-model="chargeOrder.hasBonus">
                        <el-radio-button label="1">提成</el-radio-button>
                        <el-radio-button label="2">不提成</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item v-if="chargeOrder.hasBonus==1" label="提成比列" prop="percentage">
                    <el-input placeholder type='number' v-model="chargeOrder.percentage" min="0"></el-input>
                </el-form-item>

                <el-form-item label="充值类型" prop="type">
                    <el-radio-group v-model="chargeOrder.type">
                        <el-radio-button label="1">小时</el-radio-button>
                        <el-radio-button label="2">课时</el-radio-button>
                        <el-radio-button label="3">按月</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item v-if="chargeOrder.type==1" label="充值时长" prop="hour">
                    <el-input placeholder  type='number' min="0" v-model="chargeOrder.hour"></el-input>
                </el-form-item>

                <el-form-item v-if="chargeOrder.type==2" label="充值课时数" prop="account">
                    <el-input placeholder type='number' min="0" v-model="chargeOrder.account"></el-input>
                </el-form-item>

                <el-form-item v-if="chargeOrder.type==3" label="充值月数" prop="month">
                    <el-input placeholder type='number' min="0" v-model="chargeOrder.month"></el-input>
                </el-form-item>

                <el-form-item label="对内备注" prop="memoIn">
                    <el-input placeholder v-model="chargeOrder.memoIn"></el-input>
                </el-form-item>

                <el-form-item label="对外备注" prop="memoOut">
                    <el-input placeholder v-model="chargeOrder.memoOut"></el-input>
                </el-form-item>

            </el-form>
        </el-main>

        <el-footer>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-footer>
    </d2-container>
</template>
<script>
    import request from "@/plugin/axios";
    import {mapState} from 'vuex'

    export default {
        data() {
            return {
                formRules: {
                    name: [
                        {required: true, message: '请输入学生姓名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    studentId: [
                        {required: true, message: '请输入学号', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择学生性别', trigger: 'change'}
                    ],
                    age: [
                        {required: true, message: '请输入家长年龄', trigger: 'change'},
                        {type: 'number', min: 5, max: 100, message: '年龄范围在5-100之间', trigger: 'change'}
                    ],
                    school: [
                        {required: true, message: '请选择所在校区', trigger: 'change'}
                    ],
                    buyer: [
                        {required: true, message: '请选择购买者类型', trigger: 'change'}
                    ],
                    staff: [
                        {required: true, message: '请选择购买者类型', trigger: 'change'}
                    ],
                    student: [
                        {required: true, message: '请选择学生', trigger: 'change'}
                    ],
                    payType: [
                        {required: true, message: '请选择付费类型', trigger: 'change'}
                    ],
                    cellphone: [
                        {required: true, message: '手机号不能为空', trigger: 'change'},
                        {type: 'number', message: '请输入11位合法手机号', trigger: 'change'}
                    ],
                    birthday: [
                        {type: 'date', required: true, message: '请选择出生日期', trigger: 'blur'}
                    ],
                    selectedSchoolList: [
                        {type: 'array', required: true, message: '请选择购买校区', trigger: 'blur'}
                    ],
                    selectedStudentList: [
                        {type: 'array', required: true, message: '请选择购买学生', trigger: 'blur'}
                    ],
                    productOrder: [
                        {type: 'array', required: true, message: '请选择采购商品', trigger: 'blur'}
                    ],
                    payWay: [
                        {required: true, message: '请选择支付方式', trigger: 'blur'}
                    ],
                    payStatus: [
                        {required: true, message: '请选择支付状态', trigger: 'blur'}
                    ],
                    hasBonus: [
                        {required: true, message: '请选择是否提成', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择充值类型', trigger: 'blur'}
                    ],
                    discount: [
                        {required: true, message: '请输入合法优惠金额', trigger: 'blur'}
                    ],
                    course: [
                        {type: 'array', required: true, message: '请选择课程', trigger: 'blur'}
                    ],
                    total: [
                        {required: true, message: '价格不能为空', trigger: 'blur'},
                        // {type: 'number', message: '请输入合法价格', trigger: 'blur'}
                    ],
                    hour: [
                        {required: true, message: '充值小时不能为空', trigger: 'blur'},
                        // {type: 'number', message: '请输入时长', trigger: 'blur'}
                    ],
                    account: [
                        {required: true, message: '充值课时不能为空', trigger: 'blur'},
                        // {type: 'number', message: '请输入合法金额', trigger: 'blur'}
                    ],
                    month: [
                        {required: true, message: '充值月数不能为空', trigger: 'blur'},
                        // {type: 'number', message: '请输入合法金额', trigger: 'blur'}
                    ],
                },
                selectStudent: false,
                searchStudentName: undefined,
                studentList: [],
                searchStudentCount: undefined,
                selectedStudentList: [],
                courseOrderStaff: undefined,
                selectStaff: false,
                searchStaffName: undefined,
                staffList: [],
                option: {
                    courseList: undefined,
                    schoolList: undefined
                },
                studentId : undefined,
                searchStaffCount: undefined,
                chargeOrder: {
                    school:undefined,
                    student: undefined,//
                    payWay: undefined,//
                    total: undefined,//
                    discount: undefined,//
                    memoIn: undefined,//
                    memoOut: undefined,//
                    payStatus: undefined,//
                    hasBonus: undefined,//
                    type: undefined,
                    agent: undefined,
                    hour: undefined,//
                    account: undefined,//
                    month:undefined,
                    percentage: 0,//
                    isNewStudent: undefined,
                },
                disabled: false,
                courseStaff: undefined,
                selectedProductList: [],
                selectedStaffList: [],
                inviteProportion: undefined,
                continuousProportion: undefined
            };
        },

        computed: {
            ...mapState('d2admin/user', ['info']),
            defaultProportion: function () {
                if (this.chargeOrder.isNewStudent === 1) {
                    return this.continuousProportion
                }
                if (this.chargeOrder.isNewStudent !== 1) {
                    return this.inviteProportion
                }
            }
        },

        methods: {
            reflash(){
                this.getStudentList()
                this.getStaffList()


            },
            deleteStaffClick(e) {
                this.selectedStaffList.splice(e, 1)
            },
            searchStaff() {
                this.getStaffList(1);
            },
            addStaff(e) {
                this.selectedStaffList = [];
                this.selectedStaffList.push(e);
                this.chargeOrder.agent = e._id;
                request({
                    url: "/staff/getStaffOne",
                    method: "post",
                    data: {
                        id: e._id
                    }
                }).then(res => {
                    if (res.code == 200) {
                        this.inviteProportion = parseInt(res.data.inviteProportion);
                        this.continuousProportion = parseInt(res.data.continuousProportion);
                        this.chargeOrder.percentage = this.defaultProportion
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }
                });
            },

            getStaffList(page) {
                let school;
                this.info.role.forEach((value) => {
                    if (value.name === 'school') {
                        school = this.info.school.map(value => value._id);
                    }
                });
                request({
                    url: "/staff/getStaffList",
                    method: "post",
                    data: {page: page, pageSize: 10, name: this.searchStaffName, school: this.chargeOrder.school}
                }).then(res => {
                    this.staffList = res.data.staff;
                    this.searchStaffCount = res.data.total;

                });
            },
            searchStudent() {
                this.getStudentList(1);
            },
            addStudent(e) {
                this.selectedStudentList = [];
                this.selectedStudentList.push(e);
                this.chargeOrder.student = e._id;
                request({
                    url: "/student/getStudentOne",
                    method: "post",
                    data: {
                        id: e._id
                    }
                }).then(res => {
                    if (res.code == 200) {
                        this.chargeOrder.isNewStudent = parseInt(res.data.isNewStudent);
                        this.chargeOrder.percentage = this.defaultProportion;
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }
                });
            },
            getStudentList() {
                let school;
                this.info.role.forEach((value) => {
                    if (value.name === 'school') {
                        school = this.info.school.map(value => value._id);
                    }
                });
                request({
                    url: "/student/getStudentList",
                    method: "post",
                    data: {page: 1, pageSize: 9999, name: this.searchStudentName, school: this.chargeOrder.school}
                }).then(res => {
                    if (res.code == 200) {
                        this.studentList = res.data.students
                        this.searchStudentCount = res.data.count
                        if(this.studentId){
                            const ak = this.studentId
                            this.selectedStudentList = this.studentList.filter(function(e){return e._id == ak})
                            this.chargeOrder.student = this.studentId
                        }
                    }
                });
            },

            submit() {
                console.log(parseInt(this.chargeOrder.total) <= parseInt(this.chargeOrder.discount))
                let url = "/chargeOrder/addChargeOrder";
                if(parseInt(this.chargeOrder.total) <= parseInt(this.chargeOrder.discount)){
                    this.$message({
                        message: '优惠价格不能超过收款价格',
                        type: 'error'
                    });
                }else {

                    request({
                        url: url,
                        method: "post",
                        data: this.chargeOrder
                    }).then(res => {
                        if (res.code == 200) {
                            this.$router.push({path: "/charge-order-list"})
                            this.$alert("", "提交课程订单成功", {
                                confirmButtonText: "确定"
                            });
                            this.course = {}
                        }
                    });

                }

            },
            addProduct(e) {
                if (this.selectedProductList.map(event => {
                    return event._id
                }).indexOf(e._id) == -1) {
                    this.selectedProductList.push(e)
                } else {
                    this.$message({
                        showClose: true,
                        message: '已经添加这个商品了哦',
                        type: 'error'
                    });
                }
            },
            staffCurrentChange(e) {
                this.getStaffList(e);
            },
            getCourseList() {
                let data = {};
                (data.page = 1), (data.pageSize = 999999);
                data.school = [this.courseOrder.school]
                request({
                    url: "/course/getCourseList",
                    method: "post",
                    data
                }).then(res => {
                    this.option.courseList = res.data.course;
                });
            },
            getSchoolList() {
                this.option.schoolList = this.info.school;
                this.chargeOrder.school = this.option.schoolList[0]._id;
                //零时修正
                if (this.info.role.indexOf('root') > -1) {
                    this.chargeOrder.school = this.option.schoolList[1]._id;
                }


                if (this.info.staff) {
                    this.selectedStaffList = [];
                    this.selectedStaffList.push(this.info.staff);
                    this.chargeOrder.agent = this.info.staff._id;
                    request({
                        url: "/staff/getStaffOne",
                        method: "post",
                        data: {
                            id: this.info.staff._id
                        }
                    }).then(res => {
                        if (res.code == 200) {
                            this.inviteProportion = parseInt(res.data.inviteProportion);
                            this.continuousProportion = parseInt(res.data.continuousProportion);
                            this.chargeOrder.percentage = this.defaultProportion
                        }
                    });

                }

            },
        },
        created() {
            this.getSchoolList()
            this.getStudentList()
            this.studentId = this.$route.query.studentId
        }
    };
</script>
